<template>
    <div class="head-wrap">
        <div class="left">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <el-icon size="20">
                        <Expand />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>导出pptist文件</el-dropdown-item>
                        <el-dropdown-item>导出pptx文件</el-dropdown-item>
                        <el-dropdown-item>导出文件</el-dropdown-item>
                        <el-dropdown-item disabled>重置幻灯片</el-dropdown-item>
                        <el-dropdown-item divided>意见反馈</el-dropdown-item>
                        <el-dropdown-item divided>常见问题</el-dropdown-item>
                        <el-dropdown-item divided>快捷键</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <input class='filename' v-model="fileName" placeholder="Please input" />
        </div>
        <div class="right">
            <el-tooltip effect="dark" content="幻灯片放映" placement="bottom">
                <el-icon size="20">
                    <el-icon>
                        <VideoCamera />
                    </el-icon>
                </el-icon>
                <el-icon>
                    <ArrowDownBold />
                </el-icon>
            </el-tooltip>


            <!--导出              -->
            <el-tooltip effect="dark" content="导出" placement="bottom">
                <el-icon class="downloadIcon" size="20">
                    <Download />
                </el-icon>
            </el-tooltip>

        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
let fileName = ref('未命名演示文稿');
</script>
<style lang="scss">
.head-wrap {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;

    .left {
        display: flex;
        align-items: center;

        .filename {
            margin-left: 20px;
            width: 150px;
            height: 32px;
            border: none;

            &:focus-visible {
                outline: none;
                border: none;
                box-shadow: none;
                border: 1px solid red;
                border-radius: 4px;
            }
        }

    }

    .right {

        // display: flex;

        .downloadIcon {
            margin-left: 20px;
        }
    }

}
</style>